<template>
    <div class="dataScreen-container">
        <div class="dataScreen" ref="dataScreenRef">
            <div class="dataScreen-header">
                <div class="header-lf">
                    <span class="header-screening">首页</span>
                </div>
                <div class="header-ct">
                    <div class="header-ct-title">
                        <span>智慧旅游可视化大数据展示平台</span>
                        <div class="header-ct-warning">平台高峰预警信息（2条）</div>
                    </div>
                </div>
                <div class="header-rg">
                    <span class="header-download">统计报告</span>
                    <span class="header-time">当前时间:{{ time}} </span>
                </div>
            </div>
            <div class="dataScreen-main">
                <div class="dataScreen-lf">
                    <div class="dataScreen-top">
                        <div class="dataScreen-main-title">
                            <span>实时游客统计</span>
                            <img src="./images/dataScreen-title.png" alt="" />
                        </div>
                        <div class="dataScreen-main-chart">
                            <RealTimeAccessChart ref="RealTimeAccessRef" />
                        </div>
                    </div>
                    <div class="dataScreen-center">
                        <div class="dataScreen-main-title">
                            <span>男女比例</span>
                            <img src="./images/dataScreen-title.png" alt="" />
                        </div>
                        <div class="dataScreen-main-chart">
                            <GenderRatioChart ref="GenderRatioRef" />
                        </div>
                    </div>
                    <div class="dataScreen-bottom">
                        <div class="dataScreen-main-title">
                            <span>年龄比例</span>
                            <img src="./images/dataScreen-title.png" alt="" />
                        </div>
                        <div class="dataScreen-main-chart">
                            <AgeRatioChart ref="AgeRatioRef" />
                        </div>
                    </div>
                </div>
                <div class="dataScreen-ct">
                    <div class="dataScreen-map">
                        <div class="dataScreen-map-title">
                            景区实时客流量
                        </div>
                    </div>
                    <div class="dataScreen-cb">
                        <div class="dataScreen-main-title">
                            <span>未来30天游客量趋势图</span>
                            <img src="./images/dataScreen-title.png" alt="" />
                        </div>
                        <div class="dataScreen-main-chart">
							
						</div>
                    </div>
                </div>
                <div class="dataScreen-rg">
                    <div class="dataScreen-top">
                        <div class="dataScreen-main-title title">
							<span>热门景区排行</span>
							<img src="./images/dataScreen-title.png" alt="" />
						</div>
						<div class="dataScreen-main-chart">
							
						</div>
                    </div>
                    <div class="dataScreen-center">
                        <div class="dataScreen-main-title title">
							<span>年度游客量对比</span>
							<img src="./images/dataScreen-title.png" alt="" />
						</div>
						<div class="dataScreen-main-chart">
							
						</div>
                    </div>
                    <div class="dataScreen-bottom">
                        <div class="dataScreen-main-title title">
							<span>预约渠道数据统计</span>
							<img src="./images/dataScreen-title.png" alt="" />
						</div>
						<div class="dataScreen-main-chart">
							
						</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { useTime } from '@/hooks/useTime'
import { onMounted } from '@vue/runtime-core'
import RealTimeAccessChart from './components/RealTimeAccessChart.vue'
import GenderRatioChart from './components/GenderRatioChart.vue'
import AgeRatioChart from './components/AgeRatioChart.vue'
/*展示当前时间 */
const { nowTime } = useTime()
let timer = ref(null)
let time = ref(nowTime.value)
timer.value = setInterval(() => {
    time.value = useTime().nowTime.value
},1000)


/** 获取最外层div盒子 */
const dataScreenRef = ref(null)


const dataScreen = {
	chart1: null,
	chart2: null,
	chart3: null,
	chart4: null,
	chart5: null,
	chart6: null,
	chart7: null,
	mapChart: null
};
const RealTimeAccessRef = ref()
const GenderRatioRef = ref()
const AgeRatioRef = ref()

let ageData = [
	{
		value: 200,
		name: "10岁以下",
		percentage: "16%"
	},
	{
		value: 110,
		name: "10 - 18岁",
		percentage: "8%"
	},
	{
		value: 150,
		name: "18 - 30岁",
		percentage: "12%"
	},
	{
		value: 310,
		name: "30 - 40岁",
		percentage: "24%"
	},
	{
		value: 250,
		name: "40 - 60岁",
		percentage: "20%"
	},
	{
		value: 260,
		name: "60岁以上",
		percentage: "20%"
	}
];
const initCharts = () => {
    dataScreen.chart1 = RealTimeAccessRef.value?.initChart(0.5)
    dataScreen.chart2 = GenderRatioRef.value?.initChart({
        man: 0.6,
        woman: 0.4
    })
    dataScreen.chart3 = AgeRatioRef.value?.initChart(ageData)
}

onMounted (() => {
    /* 初始化echarts */
	initCharts();
})
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>